.search-container {
    width: 100vw;
    margin: 0 auto;

    .search-header {
        width: 100vw;
        height: 12vw;

        .search-wrap {
            position: relative;
            padding: 0 13.33vw 0 12vw;
            height: 12vw;
            border-bottom: 0.27vw solid #ddd;
            font: normal 3.73vw / 1.5 Arial, sans-serif;
            color: #000;
            background-color: #e6f0f7;

            .search-box {
                position: relative;
                z-index: 1;
                padding: 1.87vw 0;

                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    left: 2.13vw;
                    top: 4.27vw;
                    z-index: 1;
                    width: 2.13vw;
                    height: 2.13vw;
                    border: 0.27vw solid #a9a9a9;
                    border-radius: 50%;
                }

                &::after {
                    content: '';
                    display: block;
                    position: absolute;
                    top: 6.93vw;
                    left: 4.27vw;
                    z-index: 2;
                    width: 1.6vw;
                    height: 0.27vw;
                    background-color: #a9a9a9;
                    transform: rotate(40deg);
                }

                input {
                    position: relative;
                    width: 100%;
                    padding: 0 8.53vw 0 8vw;
                    height: 8vw;
                    font-size: 3.73vw;
                    background-color: #fff;
                    border: 0 none;
                    border-radius: 1.33vw;
                    outline: 0 none;
                    box-sizing: border-box;
                    appearance: none;
                }

                .i-clear {
                    position: absolute;
                    top: 2.4vw;
                    right: 0;
                    width: 7.47vw;
                    height: 7.47vw;

                    &::before {
                        content: '';
                        position: absolute;
                        top: 3.2vw;
                        left: 1.6vw;
                        width: 4vw;
                        height: 0.27vw;
                        background-color: #999;
                        transform: rotate(45deg);
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        top: 3.2vw;
                        left: 1.6vw;
                        width: 4vw;
                        height: 0.27vw;
                        transform: rotate(135deg);
                        background-color: #999;
                    }
                }
            }

            a {
                cursor: pointer;

                .s-back {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 12vw;
                    height: 11.73vw;

                    &::after {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        margin: -1.87vw 0 0 -1.6vw;
                        width: 3.2vw;
                        height: 3.2vw;
                        border-left: 0.53vw solid #8a9094;
                        border-top: 0.53vw solid #8a9094;
                        transform: rotate(-45deg);
                    }
                }
            }

            .s-btn {
                position: absolute;
                top: 0;
                right: 0;
                width: 13.33vw;
                height: 11.73vw;
                padding: 0;
                background: none;
                color: #099fde;
                font-size: 4vw;
                font-family: Arial, Helvetica, sans-serif;
                text-align: center;
                border: 0 none;
            }
        }
    }

    .search-content {

        .hot-item {

            h4 {
                margin: 2.13vw 4vw 0.53vw;
                font-weight: normal;
                font-size: 3.47vw;
                color: #666;
                padding: 0;
            }

            ul {
                position: relative;
                font: normal 4.27vw /1.5 Arial, sans-serif;
                color: #000;
                border-top: 0.27vw solid #ddd;
                background-color: #fff;

                li {
                    position: relative;
                    padding: 2.67vw 9.33vw;
                    border-bottom: 0.27vw solid #ddd;

                    i {
                        position: absolute;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        width: 9.33vw;
                        font-style: italic;

                        &::before {
                            content: '';
                            position: absolute;
                            top: 4.27vw;
                            right: 2.67vw;
                            width: 2.67vw;
                            height: 2.4vw;
                            border-top: 0.53vw solid #ccc;
                            border-left: 0.53vw solid #ccc;
                        }

                        &::after {
                            content: '';
                            position: absolute;
                            top: 5.87vw;
                            left: 3.2vw;
                            width: 4vw;
                            height: 0.53vw;
                            background-color: #ccc;
                            transform: rotate(45deg);
                        }
                    }
                }
            }
        }
    }
}